<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{URL::asset('./css/findpass.css')}}">
<meta name="_token" content="{{csrf_token()}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<style type="text/css">
        [v-cloak] {
            display: none !important;
        }
    </style>
<!-- <a><img src="{{URL::asset('./img/index/floor_tel.png')}}" alt=""><span> -->
<div id="login">
    <div class="login_header">
        <div class="login_headerDiv">
            <a href="{{route('home.index.index') }}">
                <img :src="overall.site_logo">
            </a>
            <div class="login_headerTel">
                <span class="login_headerTel_tel">@{{overall.customer_mobile}}</span>
                <span class="login_headerTel_time">
                    服务时间：周一至周五9:00 - 18:00
                </span>
            </div>
        </div>
    </div>
    <div class="loginBg">
        <div class="loginForm ">
            <div class="loginMain">
                <div class="login_title">
                    <img :src="overall.site_logo">
                </div>
                <div class="login_nav">
                    <div class='active'>找回密码</div>
                </div>
                <el-form :model="form" label-position="top" size="mini" ref="form">
                    <el-form-item prop="tel" :rules="telRule">
                        <el-input v-model="form.tel"  placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" :rules="passRule">
                        <el-input v-model="form.password"  placeholder="新密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="verifyPass" :rules="verifyPassRule">
                        <el-input v-model="form.verifyPass"  placeholder="确认密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="captcha" :rules="captchaRule">
                        <span class="details_title">图形验证码：</span>
                        <el-input style="width:116px;padding-left:10px" v-model="form.captcha"></el-input>
                        <img class="codeImg" style="width:130px;height: 40px;margin:5px 0" @click="captchar" :src="captchaLink">
                        <p style="color: #888;font-size: 12px;"><i class="fa fa-question-circle-o"></i> 看不清，点击验证码换一张</p>
                    </el-form-item>
                    <el-form-item prop="code" :rules="codeRule">
                        <el-input v-model="form.code"  placeholder="验证码">
                            <span slot="suffix" @click="getCode" class="suffixCon">获取验证码<a v-if="codeBo">(@{{codeTime}}s)</a></span>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button class="submit" :loading="submitBo" @click="submitForm('form')">
                    确认找回
                </el-button>
            </div>
        </div>
    </div>
    <div class="login_footer">
        <div class="login_footer_first">
            <a href="{{route('home.index.index') }}">
                首页
            </a>
            <a href="{{route('home.store.storeList') }}">
                供应商
            </a>
            <a href="{{route('home.activity.actCate') }}">
                活动/会议/培训
            </a>
            <a href="{{route('home.goods.goodsCate') }}">
                商品
            </a>
            <a href="{{route('home.word.wordCate') }}">
                文档下载
            </a>
            <a href="{{route('home.demand.demandList') }}">
                需求市场
            </a>
            <a href="{{route('home.news.news') }}">
                新闻资讯
            </a>
        </div>
        <div class="login_footer_two">
            <a>
                <img src="{{URL::asset('./img/1.png')}}">
            </a>
            <a>
                <img src="{{URL::asset('./img/2.png')}}">
            </a>
            <!-- <a>
                <img src="{{URL::asset('./img/3.png')}}">
            </a> -->
            <a>
                <img src="{{URL::asset('./img/4.png')}}">
            </a>
            <a>
                <img src="{{URL::asset('./img/5.png')}}">
            </a>
            <!-- <a>
                <img src="{{URL::asset('./img/6.png')}}">
            </a> -->
        </div>
        <div class="login_footer_three">
            <a href="http://www.miit.gov.cn/" target="_blank">Copyright  2019-2022 www.hrqidian.com 重庆启群大数据科技有限公司版权所有 备案：渝ICP备19010042号-1</a>
        </div>
    </div>
</div>

<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>

<script>
    $(() => {
        let app = new Vue({
            el: '#login',
            data() {
                var validateTel = (rule, value, callback) => {
                    var reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/;
                    if (value == '') {
                        callback(new Error('请输入联系电话'));
                    } else if (!reg.test(value)) {
                        callback(new Error('请输入正确的联系电话!'));
                    } else {
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value == '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value != this.form.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    captchaLink:'',
                    overall: "",
                    activeBo: 1,
                    form: {
                        tel: "",
                        password: '',
                        verifyPass: '',
                        code: '',
                        captcha: ''
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                    passRule: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],
                    captchaRule: [{
                        required: true,
                        message: '图形验证码不能为空',
                        trigger: 'blur'
                    }],
                    verifyPassRule: [{
                        required: true,
                        validator: validatePass2,
                        trigger: 'blur'
                    }],

                    codeRule: [{
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    }],
                    remenberBo: false,
                    codeTime: 60,
                    submitBo: false,
                    codeBo: false,
                }
            },
            created() {
                this.captchar();
                window.$message = (res) => {
                    this.$message({
                        message: res,
                        type: 'error'
                    });
                };
                $.get("{{ route('home.public.config') }}", (res) => {
                    sessionStorage.setItem("overall", JSON.stringify(res.data))
                    this.overall = res.data
                });
            },
            methods: {
                getCode() {
                    if (this.codeTime == 60) {
                        if (!this.form.tel) return this.$message({
                            message: '请输入您的手机号码！',
                            type: 'warning'
                        });
                        let reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/
                        if (!reg.test(this.form.tel)) return this.$message({
                            message: '请输入正确的联系电话！',
                            type: 'warning'
                        });
                        apiAjax("{{ route('home.phone.getSMS') }}", 'post', {
                            captcha: this.form.captcha,
                            phone: this.form.tel,
                        }, (res) => {
                            if (res.code == 0) {
                                this.$message({
                                    message: "验证码已发送至您的手机",
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }

                        });
                    }
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitBo = true;
                            let data = {
                                mobile: this.form.tel,
                                password: this.form.password,
                                confirmc_pass: this.form.verifyPass,
                                code: this.form.code,
                            }
                            apiAjax("{{ route('home.login.findPass') }}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: '找回成功',
                                        type: 'success'
                                    });
                                    window.location.href = "{{ route('home.login.login') }}";
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                                this.submitBo = false;
                            }, (erro) => {
                                this.submitBo = false;
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                //图形验证码
                captchar(){
                    let that = this;
                    $.get("{{ route('admin.auth.captcha') }}",function(res){
                        that.captchaLink = res.data;
                    },'JSON ');
                },
            }

        })
    })
</script>